<template>
  <div class="user-list">
    <search-list
      ref="userList"
      :api-url="$url.UserList"
      :option="searchOpt"
      :itemPerRow="6"
      @selection-change="selectionChange"
      :beforeQuery="beforeQuery"
      :querySuccess="querySuccess"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="uuid" label="uuid"></el-table-column>
      <el-table-column prop="showid" label="ID"></el-table-column>
      <el-table-column prop="nickname" label="昵称">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" class="avatar" />
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="appid" label="注册平台来源">
        <template slot-scope="scope">
          <span>
            {{
              $selectFormat['platformSelect'](scope.row.appid)
                ? $selectFormat['platformSelect'](scope.row.appid).label
                : scope.row.appid
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="platform" label="终端">
        <template slot-scope="scope">
          <span>
            {{
              $selectFormat['platformSl'](scope.row.platform)
                ? $selectFormat['platformSl'](scope.row.platform).label
                : scope.row.platform
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="salesUid" label="分销身份">
        <template slot-scope="scope">
          {{
            scope.row.salesUid && scope.row.salesLevel
              ? `来自分销员:${scope.row.salesName},分销推广员`
              : scope.row.salesLevel
              ? '分销推广员'
              : scope.row.salesUid
              ? `来自分销员:${scope.row.salesName}`
              : ''
          }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="salesLevel" label="">
        <template slot-scope="scope">
          {{ scope.row.salesLevel ? '分销推广员' : '' }}
        </template>
      </el-table-column> -->
      <el-table-column prop="vipNames" label="会员类型"></el-table-column>
      <el-table-column label="用户状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['statusShow'](scope.row.jmComment + '' + scope.row.jmDisabled).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="身份认证">
        <template slot-scope="scope">
          <span>
            {{
              $selectFormat['identifiedShow'](
                scope.row.jmPerson + '' + scope.row.jmTeam + scope.row.ktTeacher,
              ).label
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="实名认证">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['userRealIdentifiedSl'](scope.row.realIdentified).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="人才频道是否显示">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['userCreatorTalentSl'](scope.row.talent).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="用户注册时间"></el-table-column>
      <el-table-column label="操作" width="250px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
          <!-- <el-button type="text" @click="concat(scope.row)">联系</el-button> -->
          <el-button type="text" @click="blackListSet(scope.row)">黑名单设置</el-button>
          <el-button type="text" @click="setVip(scope.row)">设置会员</el-button>
          <el-button type="text" @click="findWorks(scope.row)">查看作品</el-button>
          <el-button type="text" v-if="!scope.row.talent" @click="setTalent(scope.row)">
            设为人才不显示
          </el-button>
          <el-button type="text" v-else @click="setTalent(scope.row)">设为人才显示</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button
          type="primary"
          @click="backlistShow = true"
          :disabled="scope.selectedData.length == 0"
        >
          黑名单设置
        </el-button>
        <el-button type="primary" @click="createUserShow = true">
          创建账号
        </el-button>
        <!-- <el-select
          v-model="message"
          placeholder="联系用户"
          type="primary"
          :disabled="scope.selectedData.length == 0"
        >
          <el-option
            v-for="item in concatOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
        <!-- <el-select
          v-model="blacklist"
          placeholder="黑名单设置"
          type="primary"
          :disabled="scope.selectedData.length == 0"
        >
          <el-option
            v-for="item in blacklistOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
      </div>
    </search-list>
    <el-dialog title="创建用户" :visible="createUserShow" :before-close="closeCreate" width="600px">
      <el-form :rules="userCreateRule" :model="createUserInfo" ref="userCreateDialog">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="createUserInfo.nickname" type="text" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="createUserInfo.phone" type="text" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <upload-resource is-public @upload="setImgUrl"></upload-resource>
          <img :src="createUserInfo.avatar" style="width:100px" />
        </el-form-item>
        <el-form-item label="幕童有课" prop="identified">
          <el-checkbox v-model="ktChecked">讲师</el-checkbox>
        </el-form-item>
        <el-form-item label="简介" prop="intro">
          <el-input v-model="createUserInfo.intro" type="textarea" />
        </el-form-item>
        <el-form-item label="积幕">
          <el-checkbox v-model="jmPerChecked">个人认证</el-checkbox>
          <el-checkbox v-model="jmTeamChecked">团队认证</el-checkbox>
        </el-form-item>
        <el-form-item label="职业" prop="profession">
          <el-input v-model="createUserInfo.profession" type="text" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="closeDialog">关 闭</el-button>
        <el-button type="success" @click="saveUser" v-loading="loading" icon="el-icon-check">
          保 存
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="黑名单设置"
      :visible="backlistShow"
      width="300px"
      :before-close="backlistClose"
    >
      <el-select v-model="blacklist" placeholder="黑名单设置" type="primary">
        <el-option
          v-for="item in blacklistOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="setBlacklist(blacklist)">确定</el-button>
    </el-dialog>
    <!-- <el-dialog title="联系用户" :visible="concatShow" width="500px" :before-close="concatClose">
      <el-select v-model="blacklist" placeholder="联系用户" type="primary">
        <el-option
          v-for="item in concatOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-dialog> -->
    <el-dialog :visible="productShow" :before-close="vipClose">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="vipProductId" label="会员产品ID"></el-table-column>
        <el-table-column prop="name" label="产品名称"></el-table-column>
        <el-table-column prop="price" label="金额(元)"></el-table-column>
        <el-table-column prop="showPrice" label="显示金额"></el-table-column>
        <el-table-column prop="month" label="会员有效月份"></el-table-column>
        <el-table-column prop="recommend" label="是否推荐">
          <template slot-scope="scope">
            <span>
              {{ $selectFormat['recommendSl'](scope.row.recommend).label }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="dailyPrice" label="每日金额(元)"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="chooseVip(scope.row)">选TA</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import UploadResource from 'comp/UploadResource';
  import { FormRuleConf } from '@/config';
  export default {
    components: {
      UploadResource,
    },
    data() {
      return {
        concatShow: false,
        backlistShow: false,
        createUserShow: false,
        productShow: false,
        uuids: '',
        ktDisabled: 0,
        ktComment: 0,
        jmComment: 0,
        jmDisabled: 0,
        selectedData: [],
        tableData: [],
        uuid: '',
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'nickname',
            label: '昵称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'showid',
            label: 'ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'phone',
            label: '手机号码',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'uuid',
            label: 'uuid',
          },
          {
            type: 'identifiedSl',
            name: 'identified',
            label: '身份认证',
            $attrs: {
              multiple: true,
            },
          },
          {
            type: 'userStatusSl',
            name: 'actions',
            label: '用户状态',
            $attrs: {
              multiple: true,
            },
          },
          {
            type: 'vipSl',
            name: 'vipTypes',
            label: '会员类型',
            $attrs: {
              multiple: true,
            },
          },
          {
            type: 'platformSel',
            name: 'appid',
            label: '平台来源',
          },
          {
            type: 'platformSlectSl',
            name: 'platform',
            label: '终端',
          },
          {
            type: 'byDisSl',
            name: 'saled',
            label: '被分销用户筛选',
          },
          {
            type: 'disPersonSl',
            name: 'salesLevel',
            label: '分销推广员筛选',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt',
            label: '注册时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              placeholder: '注册时间',
            },
          },
          {
            type: 'userRealIdentifiedSl',
            name: 'realIdentified',
            label: '实名认证',
          },
        ],
        // concatOptions: [
        //   { value: 'send', label: '发短信' },
        //   { value: 'sys', label: '发系统消息' },
        //   { value: 'private', label: '发私信' },
        //   { value: 'push', label: '发push' },
        // ],
        blacklistOptions: [
          { value: 'normal', label: '正常' },
          { value: 'prohibit', label: '禁止访问' },
          { value: 'prohibitComment', label: '禁止评论' },
        ],
        message: '',
        blacklist: '',
        loading: false,
        ktChecked: false,
        jmPerChecked: false,
        jmTeamChecked: false,
        createUserInfo: {
          nickname: '',
          intro: '',
          phone: '',
          ktTeacher: 0,
          jmPerson: 0,
          jmTeam: 0,
          avatar: '',
          profession: '',
        },

        ...FormRuleConf.UserCreate,

        // flag:true,
      };
    },
    methods: {
      // 设置人才过滤
      setTalent(val) {
        this.$service.UserSetTalent({ talent: Number(!val.talent), uid: val.uuid }).then((res) => {
          this.$message.success('设置成功');
          this.$refs.userList.getList();
        });
      },
      detail(row) {
        const { uuid } = row;
        this.$tabs.open({ name: 'UserManagerDetail', params: { uuid } });
      },
      concat(row) {
        this.concatShow = true;
      },
      blackListSet(row) {
        this.backlistShow = true;
        this.uuids = row.uuid;
      },
      concatClose() {
        this.concatShow = false;
      },
      backlistClose() {
        this.backlistShow = false;
      },
      selectionChange(val) {
        this.selectedData = [...val];
      },
      setBlacklist(val) {
        if (val == 'prohibit') {
          this.jmDisabled = 1;
          this.jmComment = 1;
          this.ktComment = 1;
          this.ktDisabled = 1;
        } else if (val == 'prohibitComment') {
          this.jmDisabled = 0;
          this.ktDisabled = 0;
          this.jmComment = 1;
          this.ktComment = 1;
        } else {
          this.jmComment = 0;
          this.jmDisabled = 0;
          this.ktComment = 0;
          this.ktDisabled = 0;
        }
        this.$service
          .UserBatchDisable({
            ktDisabled: this.ktDisabled,
            ktComment: this.ktComment,
            jmComment: this.jmComment,
            jmDisabled: this.jmDisabled,
            uuids: this.selectedData.map((data) => data.uuid).join(',') || this.uuids,
          })
          .then((res) => {
            this.$message.success('设置成功');
            this.backlistShow = false;
            this.blacklist = '';
            this.$router.go(0);
          });
      },
      setImgUrl(img) {
        this.createUserInfo.avatar = img.url;
        this.$emit('input', img.url);
      },
      closeCreate() {
        this.clearDialog();
      },
      closeDialog() {
        this.clearDialog();
      },
      clearDialog() {
        this.createUserShow = false;
        this.$nextTick(() => {
          this.$refs['userCreateDialog'].resetFields();
        });
        this.ktChecked = false;
        this.jmPerChecked = false;
        this.jmTeamChecked = false;
      },
      saveUser() {
        this.createUserInfo.ktTeacher = Number(!!this.ktChecked);
        this.createUserInfo.jmPerson = Number(!!this.jmPerChecked);
        this.createUserInfo.jmTeam = Number(!!this.jmTeamChecked);
        this.$refs.userCreateDialog.validate((valid) => {
          if (valid && !this.loading) {
            this.loading = true;
            this.$service
              .UserCreate({
                ...this.createUserInfo,
              })
              .then((res) => {
                this.$message.success('操作成功');
                this.$service.UserList();
                this.closeDialog();
              })
              .finally(() => [(this.loading = false)]);
          }
        });
      },
      beforeQuery({ searchInfo }) {
        delete searchInfo.jmPerson;
        delete searchInfo.jmTeam;
        delete searchInfo.ktTeacher;
        // 解决时间筛选点x的时候筛选不了的问题
        if (searchInfo.updatedAt === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.updatedAt[0];
          searchInfo.endTime = searchInfo.updatedAt[1];
        }
        if (searchInfo.identified) {
          var identifies = searchInfo.identified.split(',');
          identifies.map((identify) => {
            if (!searchInfo.jmPerson) {
              searchInfo.jmPerson = identify == 'jmPerson' ? 1 : 0;
            }
            if (!searchInfo.jmTeam) {
              searchInfo.jmTeam = identify == 'jmTeam' ? 1 : 0;
            }
            if (!searchInfo.ktTeacher) {
              searchInfo.ktTeacher = identify == 'ktTeacher' ? 1 : 0;
            }
          });
        }
      },
      querySuccess(rows) {
        return rows;
      },
      vipClose() {
        this.productShow = false;
      },
      setVip(row) {
        this.productShow = true;
        this.uuid = row.uuid;
        this.$service.UserVipList().then((res) => {
          this.tableData = res;
        });
      },
      // 查看作品跳转到jimu相应页面
      findWorks(row) {
        window.open(
          `https://${process.env.NODE_ENV === 'development' ? 'dev-' : ''}jimu.movtile.com/space/${
            row.uuid
          }/works`,
        );
      },
      chooseVip(row) {
        this.$service
          .UserSetVip({
            uid: this.uuid,
            vipProductId: row.vipProductId,
          })
          .then((res) => {
            this.$message.success('会员设置成功');
            this.productShow = false;
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-form-item__label {
    float: none;
    word-break: break-word;
  }
  .avatar {
    display: inline-block;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }
</style>
